<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { Card, Descriptions, Tag, Button, Space, message } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { studentTaskApi } from '@/api/modules/studentTask'
import type { StudentTaskVO } from '@/types/task'
import { TaskSubmitStatus, SubmissionStatus } from '@/types/task'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import FilePreview from '@/components/business/FilePreview.vue'

const route = useRoute()
const router = useRouter()
const taskId = Number(route.params.id)

// 任务详情
const loading = ref(false)
const taskDetail = ref<StudentTaskVO>()

// 添加文件列表类型
interface TaskFile {
  fileName: string
  fileUrl: string
}

// 获取任务详情
const fetchTaskDetail = async () => {
  loading.value = true
  try {
    const data = await studentTaskApi.getTaskDetail(taskId)
    taskDetail.value = data
  } catch (error) {
    console.error('获取任务详情失败:', error)
    message.error(error instanceof Error ? error.message : '获取任务详情失败')
  } finally {
    loading.value = false
  }
}

// 获取状态文本和颜色
function getStatusInfo() {
  if (!taskDetail.value) {
    return { text: '未知状态', color: 'default' }
  }
  
  // 判断当前状态
  if (taskDetail.value.submissionStatus === SubmissionStatus.TEACHER_REVIEWING) {
    return { text: '待审核', color: 'processing' }
  } else if (taskDetail.value.submissionStatus === SubmissionStatus.APPROVED) {
    return { text: '已通过', color: 'success' }
  } else if (taskDetail.value.submissionStatus === SubmissionStatus.REJECTED) {
    return { text: '已驳回', color: 'error' }
  } else if (!taskDetail.value.submitted) {
    return { text: '待提交', color: 'warning' }
  } else {
    return { text: '待审核', color: 'processing' }
  }
}

// 是否允许提交
function canSubmit() {
  if (!taskDetail.value) return false
  
  // 已通过不允许再次提交
  if (taskDetail.value.submissionStatus === SubmissionStatus.APPROVED) return false
  
  // 已过期不允许提交
  if (taskDetail.value.deadline) {
    const deadlineTime = new Date(taskDetail.value.deadline).getTime()
    if (deadlineTime < Date.now()) return false
  }
  
  return true
}

// 是否处于被拒绝状态
function isRejected() {
  return taskDetail.value?.submissionStatus === SubmissionStatus.REJECTED
}

// 提交任务
const handleSubmit = () => {
  if (!canSubmit()) return
  router.push(`/student/task/submit/${taskId}`)
}

onMounted(() => {
  fetchTaskDetail()
})
</script>

<template>
  <div class="task-detail">
    <Card :loading="loading">
      <template #title>任务详情</template>
      <template #extra>
        <Button 
          type="primary" 
          @click="handleSubmit"
          :disabled="!canSubmit"
        >
          <template #icon><UploadOutlined /></template>
          {{ isRejected() ? '修改提交' : '提交任务' }}
        </Button>
      </template>

      <Descriptions :column="2" bordered>
        <Descriptions.Item label="任务名称" :span="2">
          {{ taskDetail?.name }}
        </Descriptions.Item>
        <Descriptions.Item label="截止时间">
          {{ taskDetail?.deadline ? dayjs(taskDetail.deadline).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </Descriptions.Item>
        <Descriptions.Item label="提交状态">
          <Space>
            <Tag :color="getStatusInfo().color">
              {{ getStatusInfo().text }}
            </Tag>
            <span v-if="taskDetail?.submissionTime">
              {{ dayjs(taskDetail.submissionTime).format('YYYY-MM-DD HH:mm:ss') }} 提交
            </span>
          </Space>
        </Descriptions.Item>
        <Descriptions.Item label="任务描述" :span="2">
          {{ taskDetail?.description || '-' }}
        </Descriptions.Item>
        <Descriptions.Item label="文件要求" :span="2">
          {{ taskDetail?.fileRequirements || '-' }}
        </Descriptions.Item>
        <Descriptions.Item label="提交要求" :span="2">
          {{ taskDetail?.submitRequirements || '-' }}
        </Descriptions.Item>
        <Descriptions.Item label="审核意见" :span="2">
          <div class="review-comment" v-if="taskDetail?.submissionComment">
            <pre>{{ taskDetail.submissionComment }}</pre>
          </div>
          <template v-else>-</template>
        </Descriptions.Item>
      </Descriptions>

      <!-- 添加文件预览部分 -->
      <div v-if="taskDetail?.files?.length" class="file-preview-section">
        <h3>提交文件</h3>
        <div class="file-list">
          <div v-for="file in taskDetail.files" :key="file.url || file.fileUrl" class="file-item">
            <FilePreview :file-url="file.url || file.fileUrl || ''" />
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>

<style lang="less" scoped>
.task-detail {
  .submission-detail {
    margin-top: 24px;
    
    h3 {
      margin-bottom: 16px;
    }
  }

  // 确保描述列表中的内容左对齐
  :deep(.ant-descriptions-item) {
    &[label="审核意见"],
    &[label="任务描述"],
    &[label="文件要求"],
    &[label="提交要求"] {
      .ant-descriptions-item-content {
        text-align: left;
        display: block;
      }
    }
  }

  .review-comment {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    width: 100%;
    
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      background: transparent;
      border: none;
      padding: 0;
      text-align: left;
    }
  }

  .file-preview-section {
    margin-top: 24px;
    
    h3 {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
      color: rgba(0, 0, 0, 0.85);
    }

    .file-list {
      .file-item {
        & + .file-item {
          margin-top: 8px;
        }
      }
    }
  }
}
</style> 